﻿@model List<SuperStar.Models.Product>
@{
    ViewBag.Title = "HotProduct";
}

<div class="box hotproduct">
	<h2 class="head-big-title">
		<a href="#"><span>SẢN PHẨM ƯA CHUỘNG</span></a>
	</h2>
    <div class="sub_content">
		<!-- start mt products list -->
		<div class="mt-category-products">
			<div style="overflow: visible;" id="carousel-image-and-text" class="touchcarousel grey-blue">	    			    
				<div class="touchcarousel-wrapper">
					<div id="carousel-image-and-text" class="touchcarousel grey-blue">
					<div class="touchcarousel-wrapper">
                        <ul class="touchcarousel-container">
                            @foreach(var p in Model)
                            {    
                                <li class="touchcarousel-item">
                                    <a href="@Url.Action("AddToCart","Cart", new {id = p.Id})" title="@p.Name" class="product-image">
                                        <img src="@Url.Content("Content/images/products/"+@p.Image)" alt="@p.Name" width="140" height="135"/>
                                    </a>
                                    <h2 class="product-name">
                                        <a  href="@Url.Action("AddToCart", "Cart", new { id = p.Id })" title="@p.Name">@p.Name</a>
                                    </h2>																																																																	
                                    <div class="price-box">
                                        <span class="regular-price" id="product-price-134">
                                            <span class="price">@String.Format("{0:N0}",p.Price)<sup>đ</sup></span>              
                                        </span>
                                    </div>
                                    <div class="mt-actions">
                                        <a href="@Url.Action("AddToCart", "Cart", new { id = @p.Id })">
                                            <button type="button" title="Thêm vào giỏ" class="button btn-cart">
                                                <span><span>Thêm vào giỏ</span></span>
                                            </button>	
                                        </a>															
                                    </div>
                                </li>
                            }
						
                        </ul>
					</div>
					<a href="#" class="arrow-holder left">
						<span class="arrow-icon left"></span>
					</a>
					<a href="#" class="arrow-holder right">
						<span class="arrow-icon right"></span>
					</a>
					</div>
				</div>
				<a href="#" class="arrow-holder left">
					<span class="arrow-icon left"></span>
				</a>
				<a href="#" class="arrow-holder right">
					<span class="arrow-icon right"></span>
				</a>
			</div>
		</div> <!-- end products list -->
    </div><!--End sub_content-->
	<script type="text/javascript">
		jQuery(function ($) {
		    var carouselInstance = $("#carousel-image-and-text").touchCarousel({
		        pagingNav: false,
		        snapToItems: true,
		        transitionSpeed: 1000,
		        itemsPerMove: 2,
		        autoplayDelay: 3000,
		        scrollToLast: false,
		        loopItems: true,
		        dragUsingMouse: true,
		        autoplay: true,

		        scrollbar: false
		    }).data('touchCarousel');
		});
	</script>
</div>
	